<script setup lang="ts">
defineProps<{ tree?: TreeNode[] }>();

const detail = (item: TreeNode) => {
  console.log(item);
};
</script>

<template>
  <ul class="tree">
    <li v-for="item in tree" @click.stop="detail(item)">
      <label
        ><input type="checkbox" v-model="item.checked" /> {{ item.name }}</label
      >

      <Tree v-if="item.children" :tree="item.children" />
    </li>
  </ul>
</template>

<style scoped lang="scss">
.tree {
  @apply ml-3;
}
</style>
